<template>
  <el-drawer title="提示词" v-model="promptVisible" close-on-click-modal>
    <!-- Prompt history panel -->
    <div
        class="max-w-xl rounded-lg h-full  py-4 dark:border-slate-200/10 dark:bg-slate-900"
    >
      <div class="mx-2">
        <label for="chat-input" class="sr-only">Search chats</label>
        <div class="relative">
          <input
              id="search-chats"
              type="text"
              class="w-full rounded-lg border border-slate-300 bg-slate-50 p-3 pr-10 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
              placeholder="查询提示词"
              rows="1"
              v-model="queryString"
              @keydown.enter="querySearchAsync"
              required
          />
          <button
              type="button"
              class="absolute bottom-2 right-2.5 rounded-lg p-2 text-sm text-slate-500 hover:text-blue-700 focus:outline-none sm:text-base"
          >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                aria-hidden="true"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M8 9h8"></path>
              <path d="M8 13h5"></path>
              <path
                  d="M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
              ></path>
              <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
              <path d="M20.2 20.2l1.8 1.8"></path>
            </svg>
            <span class="sr-only">查询提示词</span>
          </button>
        </div>
      </div>

      <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2">
        <li class="col-span-2 rounded-lg mt-2 shadow dark:bg-slate-900" v-for="prompt in promptList">
          <div class="flex w-full items-center justify-between space-x-6 p-6">
            <button class="group flex-1 truncate"  @click="selectPrompt(prompt)">
              <div class="flex items-center space-x-3">
                <h3
                    class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
                >
                  {{ prompt.act }}
                </h3>
              </div>
              <p class="mt-1 truncate text-sm text-slate-500">
                {{ prompt.prompt }}
              </p>
            </button>
            <button
                class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs text-slate-900 transition-colors hover:text-blue-600 focus:text-blue-600 dark:text-slate-200"
            >
              <svg
                  @click="selectPrompt(prompt)"
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                    d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
                ></path>
              </svg>
            </button>
          </div>
        </li>
      </ul>
    </div>
  </el-drawer>
</template>
<script setup lang="ts" name="AiPromptsDialog">
import {list} from "/@/api/knowledge/aiPrompt";

const emit = defineEmits(['refresh']);
const promptVisible = ref(false)
const promptList = ref([])
const queryString = ref('')


/**
 * 选中提示词
 * @param prompt
 */
const selectPrompt = (prompt: any) => {
  // Close the prompt dialog
  promptVisible.value = false
  // Emit a 'refresh' event with the selected prompt
  emit('refresh', prompt.prompt);
}

/**
 * 查询所有提示词.
 */
const querySearchAsync = async () => {
  const {data} = await list({act: queryString.value})
  promptList.value = data
}

/**
 * 打开提示词选择界面.
 */
const openDialog = () => {
  querySearchAsync()
  promptVisible.value = true
}

// Expose the openDialog function
defineExpose({
  openDialog
});
</script>
